﻿<html>
<head>
	<title>APIs</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</head>
	
<body>
	<!-- Facebook JavaScript SDK -->
	<div id="fb-root"></div>
	<script>(function(d, s, id) {
	  var js, fjs = d.getElementsByTagName(s)[0];
	  if (d.getElementById(id)) return;
	  js = d.createElement(s); js.id = id;
	  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>
	
	<!-- +1 button -->
	<h3>Google +1 button</h3>
	<g:plusone></g:plusone>
	
	<!-- Facebook comment -->
	<h3>Facebook comment box</h3>
	<div class="fb-comments" data-href="http://personal.cs.cityu.edu.hk/~51158405/tut7/plus.html" data-num-posts="2" data-width="470"></div>

	<!-- Flickr Photo -->
	<h3>Flickr</h3>
	<div id="flickr"></div>

	<script type="text/javascript">
		$.ajax({
			url:"http://api.flickr.com/services/rest/?method=flickr.favorites.getPublicList&api_key=13a1c2f3230d7433c39d151d536029a0&user_id=24180855%40N03&format=json",
			dataType:"jsonp",
			jsonpCallback: "jsonFlickrApi",
			success: function(data, status, xhr) {
				for (var i = 0; i<data.photos.photo.length; i++) {
					var fphoto = data.photos.photo[i];
					$("#flickr").append("<img src='http://farm" + fphoto.farm 
						+ ".staticflickr.com/" + fphoto.server 
						+ "/" + fphoto.id + "_" + fphoto.secret + ".jpg' />");
				}
			}
		});
	</script>
	
</body>
</html>	